import {
  Badge,
  Card,
  NoticeBar,
  Button,
  Scroller,
  Popup,
  Group,
  Field,
  Toast,
  NumberPicker,
  Context,
  SelectField,
  Dialog
} from 'saltui';
import './PageHome.less';
import './popup.less';
import './group.less';

import Lang from './Lang';
import HTab from '../../../../Common/Tab';
import ChangeRoom from '../../../common/room/ChangeRoom';
import RoomList from '../../../common/room/RoomList';
import Ajax from "../../../../Common/Ajax";
import MockTool from "../../../mock/MockTool";
import ArrayTool from "../../../../tool/ArrayTool";
import $ from "jquery";


export default class Roomhandle extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      keyword: 1,
      visible: false,
      value: null,
      room: [
      ],
      editPrice: [],
      type: [

      ],
      selectText: [],
      counts: []
    };
    this.roomType = [
    ]

    this.changeRoom = {
      from_room_id: 0,
      to_room_id: 0
    };

    this.roomType = []
    this.option = [];
    this.typeid = 0;
    this.fromRoom = null;


  }

  exChange = (from_room_id,to_room_id) => {
    this.changeRoom.from_room_id = from_room_id;
    this.changeRoom.to_room_id = to_room_id;
    if( this.changeRoom.from_room_id >0){
      this.fromRoom =  ArrayTool.indexsOfIndex(this.state.room, 'id', this.changeRoom.from_room_id )
    }


  }

  selectToRoom = (to_room_id) => {
    if (this.changeRoom.from_room_id) {
      this.changeRoom.to_room_id = to_room_id;
    }
  }

  isExChange = () => {
    return this.changeRoom.from_room_id;
  }



  findRoom = (room_id) => {
    return this.fromRoom;
  }


  handleSelectRoom = (id, event) => {
    let room = this.state.room;
    let selectText = this.state.selectText;
    room[id]['selected'] ? room[id]['selected'] = 0 : room[id]['selected'] = 1;
    selectText = [];
    room.map(function (room, index) {
      if (room.selected) {
        selectText.push(room.room_name);
      }
    })

    this.setState({room: room});
    this.setState({selectText: selectText});
  }

  _initTypeList = (data) => {
    this.roomType = data;
  }

  localSuccess = (data) => {
    this.option = data;
  }

  componentWillMount() {
    Ajax.post("roomtype/liststab", {}, this._initTypeList);
    Ajax.post("local/lists", {opetion_type: ['roomtype', 'roomstatus']}, this.localSuccess);
    this.handSwitchType(0);
  }

  handSwitchType = (id, event) => {
    this.typeid = id;
    this._initList(id);
  }

  _initList = (id) => {
    let typeId = MockTool.getType(this.roomType, id, 'id');
    Ajax.post("room/lists", {'room_type_id': typeId,'list_type':'handle'}, this.sussce);

  }

  sussce = (data) => {

    this.setState({
      room: data.lists
    })

    this.setState({
      counts: data.lists_count
    })

  }


  badgeColor = (key) => {
    let BadgeColor = {
      2: 'readly',
      3: 'booked',
    }

    return BadgeColor[key];


  }

  render() {

    return (
      <div className="card-wrap">
        <Card className="card-example t-MT10">
          <div className="t-MB10 t-ML10   lineByRem"><h1 className="t-PT10">{Lang.roomManage}</h1></div>
          <hr/>
          <div className="demo-line">

            {
              this.state.counts.map((counts, index) =>
                <Badge count={counts.value}>
                  <a href="#1" className={"demo-item " + counts.style}>{counts.name}</a>
                </Badge>
              )
            }

          </div>
          {/*<div className="demo-line">*/}
            {/*<ChangeRoom room={this.state.room} buttonName='换房'/>*/}
          {/*</div>*/}

          <div className="notice-div">
            <NoticeBar className="noticeMessage" message={Lang.selectRoom + ':' + this.state.selectText.join(',')}
                       closable={false} type="warning"/>
          </div>
          <HTab roomType={this.roomType} onTabClick={this.handSwitchType} active={'0'}/>

          <Scroller className="t-FB1" scrollX scrollY={false}>
            <div className="t-LH44 room-list">
              <RoomList
                        findRoom={this.findRoom}
                        changeRoom={this.changeRoom}
                        isExChange={this.isExChange}
                        exChange={this.exChange}
                        selectToRoom={this.selectToRoom}
                        typeid={this.typeid}
                        onChange={this.handSwitchType}
                        option={this.option}
                        roomtype={2}
                        onClick={this.handleSelectRoom}
                        room={this.state.room}/>
            </div>
          </Scroller>


        </Card>
      </div>
    );
  }
}
